﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <style type="text/css">
        #test1 {
            height:40px;
            width:40px;
            border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
            border-style:solid;
            border-width:40px;
        }

        #test2 {
            height:0;
            width:0;
            overflow: hidden; /* 这里设置overflow, font-size, line-height */
            font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
            line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
            border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
            border-style:solid;
            border-width:40px;
        }
        
        #test3 {
            height:0;
            width:0;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            border-color:#FF9600 transparent transparent transparent;
            border-style:solid;
            border-width:40px;
        }

        #test4 {
            height:0;
            width:0;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            border-color:#FF9600 transparent transparent transparent;
            border-style:solid dashed dashed dashed;
            border-width:40px;
        }

        #test5 {
            height:0;
            width:0;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            border-color:#FF9600 #3366ff transparent transparent;
            border-style:solid solid dashed dashed;
            border-width:50px 80px 0 0 ;
        }
        
        #test6 {
            height:0;
            width:94px;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            border-color:#FF9600 transparent #12ad2a transparent;
            border-style:dashed solid solid solid;
            border-width:0 3px 3px 3px ;
        }
        
        #test7 {
            height:40px;
            width:100px;
            overflow: hidden;
            font-size: 0;
            line-height: 0;
            background-color: #12ad2a;
        }

    </style>
</head>
<body>

<div id="test1">
</div>

<div id="test2">
</div>

<div id="test3">
</div>

<div id="test4">
</div>

<div id="test5">
</div>

<div id="test6">
</div>

<div id="test7">
</div>

</body>
</html>
